<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/public/static/home/static/css/base.css"/>
    <title></title>
    <style>
        html{
            width: 600px;
            height: 700px;
            background: url(/public/static/home/static/img/issue-bg.png) center no-repeat;
            background-size: cover;
        }
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        h5{
            font-size: 45px;
            font-weight: 600;
            margin-top: 45px;
            margin-bottom: 50px;
            text-align: center;
        }
        .input-box{
            width: 450px;
            height: 50px;
            padding: 10px 0;
            background-color: #fff;
            border-radius: 5px;
            margin: 0 auto 25px;
        }
        .input-box .img-box{
            width: 15%;
            height: 50px;
            float: left;
        }
        .input-box .img-box img{
            height: 30px;
            display: block;
            margin: 10px auto;
        }
        .input-box input{
            display: block;
            float: left;
            width: 80%;
            font-size: 20px;
            height: 50px;
        }
        .text-box{
            width: 383px;
            padding: 15px 67px 15px 0;
            margin: 0 auto 25px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;
        }
        .text-box textarea{
            width: 100%;
            font-size: 20px;
            text-indent: 3.3em;
        }
        .text-box .img-box{
            width: 15%;
            height: 30px;
            position: absolute;
            top: 15px;
        }

        .text-box .img-box img{
            height: 30px;
            display: block;
            margin: 0 auto;
        }
        .btn{
            width: 450px;
            font-size: 27px;
            padding:10px 0;
            text-align: center;
            color: #fff;
            background-color: #292929;
            border-radius: 5px;
            margin: 55px auto;
        }
    </style>
</head>
<body>
<h5>故障申报</h5>
<div class="input-box">
    <div class="img-box">
        <img src="/public/static/home/static/img/issue/name.png" alt="" />
    </div>
    <input type="text" placeholder="请输入联系人姓名" name="name"/>
</div>
<div class="input-box">
    <div class="img-box">
        <img src="/public/static/home/static/img/issue/phone.png" alt="" />
    </div>
    <input type="text" placeholder="请输入联系人手机号" name="phone"/>
</div>
<div class="input-box">
    <div class="img-box">
        <img src="/public/static/home/static/img/issue/phone.png" alt="" />
    </div>
    <input type="text" placeholder="请输入联系地址" name="address"/>
</div>
<div class="text-box">
    <div class="img-box">
        <img src="/public/static/home/static/img/issue/descrip.png" alt="" />
    </div>
    <textarea name="description" rows="4" cols="" placeholder="请在此输入故障描述"></textarea>
</div>
<div class="btn">立即提交</div>
<script src="/public/static/home/static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $('.btn').click(function () {
        var name = $('input[name=name]').val();
        var phone = $('input[name=phone]').val();
        var address = $('input[name=address]').val();
        var description = $('textarea[name=description]').val();

        if (name == ''){
            alert('请输入联系人！');
            return false;
        }
        if (phone == ''||phone.length != 11){
            alert('请输入正确的联系人电话！');
            return false;
        }
        if (address == ''){
            alert('请输入联系地址！');
            return false;
        }
        if (description == ''||description.length<15){
            alert('请输入详细的故障描述，字数不少于15个字符！');
            return false;
        }
        $.post('/dispatch',{name:name,tel:phone,desc:description,address:address},function (res) {
            if (res.code == 1){
                alert(res.msg);
            } else {
                alert(res.msg);
            }
        },'JSON');
    });
</script>
</body>
</html>
